Quick  Advertisement  - Firefox 


• You  pretty  much  need  to  use  Firefox  for  serious  website  development 

• Important  plugins: 

• Web  Developer  - Chris  Pedrick 

• FireBug  - Joe  Hewitt 


http://addons.mozilla.org/ 
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ri"B  man  This  site  contains  a bunch  of  stuff  includinq  software,  tel 
miscellaneous  material.  This  also  includes  a number  of  activities  and 
my  good  friend  Richard  Wiggins. 
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Outline  Frames 
Outline  Headings 
Outline  Links 
Outline  Tables 

Outline  Block  Level  Elements 


Tools  T View  Source  * Optio 


Recent  Video: 

John  Merlin  Williams  Goes  Street  Racim 

| Recent  Video: 

Dr.  Chuck  Goes  Motocross  Racing  on  hi 

Chuck's  TV  and  Media 
Chuck’s  Talks 
Chuck's  Book 
Chuck's  Columns! 
Resume  and  Bio 
Blog  (26-Nov  11:44) 
Chuck's  Papers 

UM  School  of  Information 
Sakai  Planet  Blog 


Teaching 

SI  182  - Building  Applications  for  Information  Environments 
SI  539  - Design  of  Complex  Web  Sites  (Rails) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts 


✓ Outline  Deprecated  Elements 


Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 


Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  Install  a hardwood  floor  In  4 minutes! 

Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 

Nuthin’  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's  through  2004. 
More  Multimedia  Projects... 

p: 

Software  Tools 

PHP  image  software  for  v300  and  Treo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 

Other  software  Tools 

□ ; 

Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Version  1, 


✓ Show  Element  Names  When  Outlining 
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kai  and 

uPortal  at  UNISA  - Johan  van 
den  Berg 

Produced:  June  6.  2006  This 
video  was  taped  while  are  the 
Sakai  meeinq  in  Vancouver. 
Johan  discusses  their  upcominq 
project  to  inteqrate  uPortal  and 
Sakai  to  produce  the  UNISA 
campus  portal.  Johan  attended 
both  the  Sakai  and  JA-Siq 
meetinqs  and  descibed  the 
UNISA  approach  to  both 
cmmunities.  Details:  3 minutes, 
Windows  Media  300  kbps. 

This  is  a randomly  selected  show 
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Two  kinds  of  elements 


Inline  - affects  how  text  looks 


> strong,  span 

Block  - Containers  that  can  be  laid  out 

> Paragraphs,  etc 


CSS  can  change  a tag  from  inline  to 
block 


Navigation  li  { 
display:  inline; 

} 


Inline  Elements 


• Flowed  with  other  text 

• span,  em,  strong,  cite,  a 

• Inline  tags  can  be  nested  as  long  as  they  match 

• <span  dass=”important”><cite>Stuff</cite></span> 

• Block  can  contain  inline  - but  inline  cannot  contain  block 


Block  Level  Elements 


• Starts  on  its  own  line  - ends 
justification  and  starts  a new  block 

• Can  be  a container  for  other 
elements 

• h I - h6,  p,  div,  blockquote,  ul,  ol, 
form 


<div  id=”content”> 
<p>One  </p> 
<p>Two</p> 
</div> 


• Blocks  can  contain  other  blocks 


Viewing  Block  Level  Elements 


• Change  the  CSS  to  add  a border 

• Firefox  plugin  - Web  Developer 
• https://addons.mozilla.org/ 


#mast-head{ 

border:  I px  dashed  gray; 
clear:  both; 
height:  1 00%; 
overflow:  hidden; 

} 


* Toozday  Personal  Learning  Environment  (11.0) 


Name: 


Password: 


( Login  ) 


Welcome  to  the  Fall  2007  SI  539  Project. 


You  can  login  if  you  previously  created  an  account.  To  create  a new  account,  press  "Login" 
and  then  "New  Account".  Make  an  account  with  a login  of  “admin"  to  administer  the  system. 

For  good  time,  try  out  the  new  iPhone  look  portal. 

Sorry  about  the  CSS  - perhaps  someone  will  clean  it  up  and  make  it  look  prettier.  /Chuck 


The  portal  shows  two  tools  at 
a time  using  Ajax  and  they 
operate  independently.  Site 
tools  work  within  the  context 
of  that  site. 


#mast-head  #login-header  form  input[type=submit]{ 

ple-style-wireframe.css  border:  I px  solid  #b44; 

color:#b44; 

padding:  I px; 


} 


Dr.  Chuck's  Interactive  Personal  Portfolio 
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Outline  Frames 
Outline  Headings 


J T Google 


Tools  * 


View  Source 


Opti< 


This  site  contains  a bunch  of  stuff  including  software,  television  si 
miscellaneous  material.  This  also  includes  a number  of  activities 
done  with  my  good  friend  Richard  Wiggins. 
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Quick  Links 

Chuck's  TV  and  Media 
Chuck's  Talks 
Chuck's  Book 
Chuck's  Columns 
Resume  and  Bio 
Blog  (29-Jan  12:10) 
Chuck's  Papers 

UM  School  of  Information 
Sakai  Planet  Blog 


Bjgchu 


Good  week  - the  MLK 
holiday  and  code  weekend 
ended  up  with  about  30 
hours  working  on  Sakai  - 
got  some  stuff  done  and 
more  stuff  started,  i day  ago 
Iphone  make  slow  motion 
grocery  shopping 
survivable.  1 day  ago 


New  Video:  Dr.  Chuck'  Ruby  Lecture  from  Universfdad  Polite 
(www.upv.es). 

Recent  Video:  Dr.  Chuck  Goes  Motocross  Racing  on  his  Sua 
ffiH  Teaching 

S1 182  - Building  Applications  for  Information  Environment: 
SI  S39  - Design  of  Complex  Web  Sites  (Ralls) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts 


Outline  Links 
Outline  Tables 


✓ Outline  Block  Level  Elements 


Outline  Deprecated  Elements 
Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 

■/  Show  Element  Names  When  Outlining 
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Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  install  a hardwood  floor  in  4 minutes! 

Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 
Nuthln'  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's 
through  2004. 

More  Multimedia  Projects... 

Software  Tools 

PHP  image  software  for  v300  and  Treo-600  SMS 
CllpBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 
Other  software  Tools 


ications 
ion  Environments 

SI182  is  a new  undergraduate 
programming  course  focused 
on  learning  how  to  program 
to  analyze  data.  The  course 
will  be  taught  in  Python.  For 
more  information  see 
www.sl182.com. 

HB  This  is  a randomly  selected 
show  from  our  library  of  shows  - 
more  shows  will  be  added  as 
they  are  digitized.  You  can  view 
the  entire  collection  here. 


| Done 


Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Version 


CSS  Box  Model 

• height  and  width  properties  size  the  block  element 

• margin  properties  define  the  space  around  the  block  element 

• border  properties  define  the  borders  around  a a block  element 

• padding  properties  define  the  space  between  the  element  border  and 
the  element  content 

• background  properties  allow  you  to  control  the  background  color  of 
an  element,  set  an  image  as  the  background,  repeat  a background 
image  vertically  or  horizontally,  and  position  an  image  on  a page 


.trapped  { 
height:  lOOpx; 
width:  200px; 
margin:  20px; 
border:  5px  solid  yellow; 
background:  red; 
padding:  20px; 
font-family:Arial; 
color:orange; 
font-size:20px; 

} 


20 


20 


9 5 4 0 

0 0 0 0 


5 


<p  class=”trapped”> 

I am  trapped  in  a glass  case  of  emotion 
which  is  lOOpx  high  and  200px  wide. 

</p> 


The  Box  Model 


.trapped  { 
height:  50px; 
width:  50px; 

} 

.trapped2  { 
height:  50px; 
width:  50px; 

border:  5px  solid  yellow; 
padding:  lOpx; 

} 

<p  class="trapped"> 
One</p> 

<p  class="trapped2"> 
Two</p> 


Border,  padding,  and  margin  are  additive. 


More  Box  Model 


.trapped  { 
overflow:  hidden; 
margin:  2px  3px  4px  5px; 
margin-left:  4px; 
padding:  7px,  8px,  9px,  I Opx; 
padding-top:  I4px; 
border-top:  Ipx  solid  yellow; 
border-right-color:  yellow; 
border-bottom-style:  dashed; 
border- 1 eft- width:  px; 

} 


• overflow  - hidden,  scroll,  or  visible 
(default) 

• border-style  - none,  hidden,  dotted, 
dashed,  solid,  double,  groove,  ridge, 
inset,  outset 

• Don’t  memorize  these  - Google  “CSS 
Cheat  Sheet” 


http://www.w3.org/TR/REC-CSS2/box.html 


Images  in  Block  Elements 


• You  can  place  background 
images  in  CSS  block  elements 


• Some  browsers  get  really  tricky 
with  images  beyond  the  basic 
standards  - so  be  careful 

-we  b ki  t-  bo  rd  e r-  i m age : 
url(iPhoneButton.png)  0 5 0 5; 
-webkit-border-radius:  0; 


My  Workspace 

Logout 

My  Sites 

> 

My  Profile 

> 

User  Setup 

> 

Site  Setup 

> 

Thanks  to  joehewitt.com 

> 

S My  Workspace 

Logout  1 

My  Sites 

> 

My  Profile 

> 

User  Setup 

> 

Site  Setup 

> 

Thanks  to  joehewitt.com 

> 

^ Disable  ▼ A Cookies  T J CSS 


Forms 
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.trapped  { 
height:  lOOpx; 
width:  200px; 
margin:  20px; 
border:  5px  solid  yellow; 
background:  red; 
padding:  20px; 
font-family:Arial; 
color:orange; 
font-size:20px; 

background-image:  url(BlueSkyLarge.jpg); 

} 


nd2Q|^P 
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Images  overlay 
Background 


20 


i i i i 

9 5 4 ° 

0 0 0 0 


e 

.trapped  { 
height:  lOOpx; 
width:  200px; 
margin:  20px; 
border:  5px  solid  yellow; 
background:white; 
padding:  20px; 
font-family:Arial; 
color:orange; 
font-size:20px; 

background-image:  url (gray- right-grad. gif); 
background-repeat:  repeat-y; 

} 


* & Cookies  ▼ CSS  T O Forms  ▼ 


I am  trapped  in  a 
glass  case  of  emotion 
which  is  lOOpx  high 
and  200px  wide. 


Repeating 

Images 


myworkspace@ctools.umich.edu 

myworkspace@ctools.umich.edu 

My  Workspace  | SI  539  002  F07  | SI  543  001  F07  | SI  182  | SI  539  | BS3ESEHHHHBB 

My  Workspace  | SI  539  002  F07  | SI  543  001  F07  | SI  182  SI  539  | 
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Home 

Worksite  Setup 
Membership 
Schedule 
Announcements 
Resources 
News 
Web  Content 
Preferences 
Help 


Charles  Severance 


Message  of  the  Day 


Options 

Open  Courseware  Speaker's  Series 

November  29,  4:00pm  - 1110  Ford  Classroom,  Weill  Hall,  Gerald  R.  Ford  School  of  Public  Policy. 

Open  Courseware:  Surprises  and  More  Surprises  When  You  Open  Up  Your  Teaching  Materials  to  the  World. 

Professor  Shigeru  Miyagawa  from  MIT  will  talk  about  his  experiences  as  a member  of  the  original  MIT  committee  that  proposed  Open 
Courseware  in  1999. 


Get  Help  Now!  - IM  CTools  Support 

Contact  ctoolshelp"  via  Yahoo!  Messenger,  AOL,  or  iChat:  Monday  through  Friday,  10  am  to  3 pm. 


Home 

Worksite  Setup 
Membership 
Schedule 
Announcements 
Resources 
News 
Web  Content 
Preferences 
Help 


Charles  Severance 


Message  of  the  Day 


Options 

Open  Courseware  Speaker's 
Series 

November  29,  4:00pm  - 1110  Ford 
Classroom,  Weill  Hall,  Gerald  R.  Ford  School 
of  Public  Policy. 

Open  Courseware:  Surprises  and  More 
Surprises  When  You  Open  Up  Your  Teaching 
Materials  to  the  World. 

Professor  Shigeru  Miyagawa  from  MIT  will 
talk  about  his  experiences  as  a member  of 


Home 

About  Sakai 
> Sakai  Spotlight 

> Sakai  in  Production 

> Sakai  Maps 

The  Sakai  Community 

> Sakai  Foundation 

> Sakai  Partners  Program 

> Commercial  Affiliates 
Downloads  and 
Resources 

> Latest  Release 

> Release  Docs 

> Programmer  Manual 

> Features  List 


Collaboration  and  Learning  Environment  for  Education 

free  to  use,  free  to  develop,  freedom  for  education 


LATEST  NEWS 


Sakai  Newsletter  October  18, 
2007 

McGraw-Hill  Higher  Education 
and  Etudes  Form  Alliance 
MUSE:  University  of 
Melbourne  Sakai  Pilot 
Sakai  Newsletter  October  4, 
2007 

Sakai  Board:  Call  for 
Nominations 


Read  the  Newsletter  O 
The  Sakai  Community 


a Espartol 


SEARCH 

| search  all  sites  ~| 


Download  the  Latest  Release 
2.4.1  Release  O 

Sakai  Overview 

• About  Sakai  video 

• About  Sakai  PowerPoint 

Get  involved 

• Join  our  open  mail  lists 

• Collaborate  using  Sakai 

• View  the  Project  Wiki 

• Read  the  latest  sakai-dev 
email 

Conference  Presentations 

• Amsterdam,  NL  (June  2007) 

• Atlanta,  GA  (Dec  2006) 

« Vanrnnvpr  Rf  /May ?nnfil 


Upcoming  Events 


8th  Sakai  Conference 


Newport  Beach  Marriott  Hotel  and  Spa 
Newport  Beach,  CA,  USA 
Tues-Thur,  4-6  Dec.  2007 

Pre-conference  sessions,  Mon,  3 Dec. 
2007 

Post-conference  sessions,  Fri,  7 Dec. 
2007 


Home 

About  Sakai 
:•  Sakai  Spotlight 
:•  Sakai  in  Production 
:•  Sakai  Maps 
The  Sakai  Community 
:•  Sakai  Foundation 
:•  Sakai  Partners  Program 
:•  Commercial  Affiliates 
Downloads  and 
Resources 
:•  Latest  Release 
:■  Release  Docs 
:•  Programmer  Manual 


Collaboratioi^n^^aminp 

free  to  use,  f 


LATEST  NEWS 


Sakai  Newsletter  October  18, 
2007 

McGraw-Hill  Higher  Education 
and  Etudes  Form  Alliance 
MUSE:  University  of 
Melbourne  Sakai  Pilot 
Sakai  Newsletter  October  4, 
2007 

Sakai  Board:  Call  for 
Nominations 


Read  the  Newsletter  O 

The  Sakai  Comm  unity 


Positioning 

• static  - Default.  Place  the  element  in  the  normal  flow  of  the  page  gives  it  (a 
static  element  ignores  any  top,  bottom,  left,  or  right  declarations) 

• relative  - An  element  with  position:  relative  moves  an  element  relative  to  its 
normal  position,  so  "left:20"  adds  20  pixels  to  the  element's  LEFT  position 

• absolute  - An  element  with  position:  absolute  is  positioned  at  the  specified 
coordinates  relative  to  its  containing  block. 

• fixed  - An  element  with  position:  fixed  is  positioned  at  the  specified 
coordinates  relative  to  the  browser  window. 

http://www.w3schools.com/css/pr_class_position.asp 


Relative  Position 


<html> 

<head> 

<style  type="text/css”> 
h2.pos_ieft 
1 

positionrelative; 
ieft:-20px 
) 

h2.pos_right 

1 

positionrelative; 
left;20px 

J 

</style> 

</head> 

<body> 

<h2>This  is  a heading  in  normal  position</h2> 

<h2  class="pos_left">This  heading  is  moved  left  to  its  normal  position</h2> 

<h2  class='pos_right">This  heading  is  moved  right  to  its  normal  position</h2> 
<p>Relative  positioning  moves  an  element  RELATIVE  to  its  original  position. </p> 
<p>The  style  "left:-20px”  subtracts  20  pixels  from  the  element's  original  left 
position. </p> 

<p>The  style  "left:20px“  adds  20  pixels  to  the  element's  original  left  position. </p> 
</body> 

</html> 


This  is  a heading  in  normal  position 

'his  heading  is  moved  left  to  its  normal 
osition 

This  heading  is  moved  right  to  its  normal 
position 

I Relative  positioning  moves  an  clement  RELATIVE  to  its  original  position 

The  style  "lcft:-20px"  subtracts  20  pixels  from  the  element's  original  left 
position. 

The  style  "left:20px"  adds  20  pixels  to  the  element's  original  left  position. 


http://www.w3schools.com/css/pr_class_position.asp 


p.one 

{ 

position:fixed; 

left:5px; 

top:5px; 

background:  red; 

} 


p.two 

{ 

position:fixed; 
top:30px; 
right:5px; 
background:  red; 

} 


http://www.w3schools.com/css/pr_class_position.asp 
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<p  class="one">Some  text</p>  Fixed  is  relative  to  browser  window 

<p  class="two">Some  more  text</p>  so  it  hovers  over  the  document. 


p.one 

{ 

position:absolute; 
left:  I Opx; 
top:  I Opx; 
background:  green; 

} 

p.two 


{ left:  I Opx 

position:absolute; 
top:40px; 
right:  I Opx; 
background:  red; 

} A 

Absolute  is  relative  to  the  document  so  as  you 

<p  class="one">Happy</p>  scroll  through  the  document  - absolute  blocks 

<p  class="two">Holidays</p>  move  with  the  rest  of  the  document. 


Absolute 

Overlap 

Absolute  positioning  is  cool 
and  makes  it  so  browser  can 
layout  the  page  with  its  “eyes 
closed’’ 

Browser  is  doing  what  we 
told  it  to  do  - we  as  designers 
must  do  the  “thinking’’  and 
make  sure  that  if  the  browser 
follows  our  instructions  - it 
will  look  good 


position-overiap.htm 

1 6 | ^ file:///Users/csev/Desktop/teach/si  " Google  » 

CP  H CT  Tw  Tz  U-Mt  18k  13k  dr  Cm  Cc  src  Jira  » 


p.one 

{ 

position:absolute; 
left:0%; 
width:50%; 
background:  green; 

} 

p.two 

{ 

position:absolute; 

I eft:  50%; 

width:50%;background:  red; 

} 


Using  percentages  instead  of  pixels. 


fifty-fifty.htm 

^ file:///Users/csev/Desktop/teach/si5:  - Google  » 
PP  H CT  Tw  Tz  U-Mt  18k  13k  dr  Gm  Gc  » 


1 


50% 


//. 


z-lndex  - Front  to  back 


• Can  be  used  when  position  is 
absolute 

• Can  be  used  to  show  and  hide 
divs 

• z-index  - When  there  is  overlap 
show  the  element  with  the  highest 
z-index 


position-overlap.htm 

◄ | ► (5  file:///Users/csev/Desktop/teach/si  “ Coogle  » 

d]  H CT  Tw  Tz  U-M»  18k  13k  dr  Cm  Cc  src  Jira  » 


Overlap  can  be  partial 


body  { 

background:  grey; 

} 

#wrapper  { 
position:  absolute; 
top:  lOpx; 
left:  40  px; 
min-height:480px; 
min-width:640px; 
text-align:  left; 
background:  white; 

} 


#nav  { 

position:absolute; 
top:  5px; 
left:  5px; 
width:  I 1 5; 
background:  green; 

} 

#content  { 
position:absolute; 
top:  5px; 
left:  I25px; 
width:  5 I Opx; 
background:  red; 
vertical-align:  top; 

} 


left-nav-fixed.htm 


j?  file:///Users/csev/Desktop/teach/si53  * Q-  Google  » 
OP  H CT  Tw  Tz  U-Mt  18k  13k  dr  Cm  Gc  » 


body> 

<div  id="wrapper"> 

<div  id="nav"> 

<ul> 

<li>One</li> 

<li>Two</li> 

<li>Three</li> 

</ul> 

</div> 

<div  id="content"> 

<P> 

This  trick  from 

http://www.mediaservices.mmu.ac.  uk/mmuweb/index.php?p=5 
Monday,  7th  June  2004 

</p> 

</div> 

/div> 


/bodv> 


Markup  Mechanics 


• There  is  an  art  to  designing  markup  to  be  skinned  - you  want  to  give 
designers  plenty  of  control  in  the  changing  the  look  and  feel. 

• Two  basic  needs 

• Semantically  markup  your  content 

• Container  divs  allow  designers  to  grab  and  place  objects  at  different 
nesting  levels 


Features 
New  for  Fall  07 
Training 


<div> 

<div> 


<p>  CTools  Now  Hiring  User  Support  & Quality  Assurance  Consultants 


Survey  Results 


Acknowledgments 

Help 


<p> 


<p>  Be  part  of  a team  delivering  an  enterprise-wide,  web-based  product.  Learn  about  the  software  development  life 
cycle  from  a testing  and  support  perspective.  The  successful  candidate  for  the  Computer  Consultant  II  position  must 
be  a graduate  student  or  above,  possess  excellent  communication  skills,  have  a basic  understanding  of  web 
technologies  and  a desire  to  learn  more.  Non-students  interested  in  working  part  time  are  also  encouraged  to  apply. 

<div> 

<ul> 


• 10  to  15  hours  per  week 
. Start  Date:  ASAP 

• Time  Frame:  Fall/winter/spring/summer 
» Pay  Range:  SI  1.00/hour  to  S14.00/hour 


<P> 


* Toozday  Personal  Learning 
Environment  (1 1 .0) 

|You  are  logged  in  as  admin  floooufll 


I Refresh  12  Sites)  Mv  Profile  Users  Sites  Fun  Site  # 2 


You  can  choose  which  site  to  visit  by  clicking  on  the  site's 
link  above. 

For  good  time,  try  out  the  new  iPhone  look  portal. 


The  portal  shows 
two  tools  at  a time 
using  Ajax  and  they 
operate 

independently.  Site 
tools  work  within 
the  context  of  that 
Isite. | 


Toozday  Personal  Learning 

You  are  logged  in  as  admin  ( logout) 

Environment  (11.0) 

Refresh  (2  Sites)  My  Profile  Users  Sites 

Fun  Site  #2 

Add  Account 

The  portal  shows  two 

tools  at  a time  using 

Name  Login  Password  Email  Actions 

Ajax  and  they 

operate 


Admin  admin  admin 

sjsjsj  Wew/Edlt  Delete 

independently.  Site 

csec  csev  p 

Vlaw/Edlt  Delete 

tools  work  within  the 

context  of  that  site. 

x y z 

Vlew/Edlt  Delete 

Toozday  Personal  You  are  logged  in  as  admin  (logout) 
Learning  Environment  (I  1.0) 


Refresh  (2  Sites) 

My  Profile  Users 

Sites  Fun  Site  # 2 

Add  Account 

The  portal  shows  two 
tools  at  a time  using 

I Name 

Login 

Password 

Email 

Actions  hB 

Ajax  and  they  operate 
independently.  Site 
tools  work  within  the 

Admin 

admin 

admin 

sjsjsj 

View/Edit  Delete 

csec 

csev 

P 

View/Edit  Delete 

context  of  that  site. 

X 

y 

z 

View/Edit  Delete 

Toozday  Personal  Learning  You  are  logged  In  as  admin  (logout) 

Environment  (11.0) 

Refresh  (2  Sites)  My  Profile  Users  Sites  Fun  Site  # 2 


Add  Account 


Name  Login  Password  Email  Actions 


Admin  admin  admin 
csec  csev  p 
x y z 


sjsjsj  View/Edit  c 

View/Edit  Dei  ate 
View/Edit  Delete 


The  portal  shows  two 
tools  at  a time  using 
Ajax  and  they  operate 
independently.  Site 
tools  work  within  the 
context  of  that  site. 


z 


Inspiration 


£ 


v_jd.TClC'Tl 


A demonstration  of  what 
can  be  accomplished 
visually  through  CSS-based 
design.  Select  any  style 
sheet  from  the  list  to  load  it 
into  this  page. 


The  Road  to  Enlightenment 

Littering  a dark  and  dreary  road  lay  the  past  relics  of 
browser-specific  tags,  incompatible  DO  Ms,  and  broken 
CSS  support. 

Today,  we  must  dear  the  mind  of  past  practices.  Web 
enlightenment  has  been  achieved  thanks  to  the  tireless 
efforts  of  folk  like  the  W3C,  WaSP  and  the  major 
browser  creators. 


The  css  Zen  Garden  invites  you  to  relax  and  meditate  on 

Download  the  sample  , , , , , n . 

the  important  lessons  of  the  masters.  Begin  to  see  with 

html file  and  clarity.  Learn  to  use  the  (yet  to  be)  time-honored 

techniques  in  new  and  invigorating  fashion.  Become  one 
with  the  web. 


CSS  Co.,  Ltd.  by 

Benjamin  Klemm 

Sakur.i  by  Tatsuya 
Uchtda 

Kyoto  Forest  by  John 
Polftowski 

A Walk  In  the  Garden 
by  Simon  Van 


by  Rene 

Hornig 

Withering  Beauty  by 

William  Duffy 

by  Tlmo 


r 


csszengdrden 


DOWNLOAD  THE  SAMPLE  HTML  FILE 


NLOAD  THE  SAMPLE  C 


The  Road  to  Enlightenment 

Littering  a dark  and  dreary  road  lay  the  past  relics  of 
browser-specific  tags,  Incompatible  DOMs,  and  broken  CSS 
support. 


http://www.csszengarden.com/ 


Summary 

• CSS  Layout  is  its  own  art  and  science 

• CSS  Basics  are  well  established  and  well  supported  in  all  modern  browsers 

• The  box  model  is  pretty  straightforward  - and  allows  nice  design  within  the 
standards  with  reasonable  effort  levels. 

• Site  layout  and  markup  is  further  evolving  - mostly  to  make  it  increasingly 
possible  to  support  desktop  like  experiences  on  the  web. 

• These  innovations  will  naturally  cause  incompatibilities  - which  make  things 
interesting  and  frustrating  at  times. 


